<template>
  <view class="article">
    <Loading :loadModal="loadModal" :hint="hint"></Loading>
    <scroll-view class="bg-white nav header-nav" :style="'top:'+CustomBar+'px'" scroll-x scroll-with-animation
      v-bind:scroll-left="scrollLeft">
			 <view :class="'全部'==labelCur?'cu-item text-green cur':'cu-item'" data-id="全部" data-index="0" @tap='labelSelect'>全部</view>
      <view v-for="(item,index) in labelList" :class="item.value==labelCur?'cu-item text-green cur':'cu-item'" @click="labelSelect"
        :data-id="item.value"  :data-index="index" :key="index">{{item.value}}
      </view>
    </scroll-view>

    <view class="content-kind">
      <block v-if="posts.length>0">
        <view v-for="item in posts" :class="isCard?'cu-card article no-card':'cu-card article'" @tap="bindPostDetail" data-url="../detail/detail"
          :data-id="item._id" :key="item._id">
          <view class="cu-item shadow">
            <view class="title">
              <view class="text-cut">{{item.title}}</view>
            </view>
            <view class="content">
              <image :src="item.defaultImageUrl" mode="aspectFill"></image>
              <view class="desc">
                <view class="text-content cite"> {{item.digest}}</view>
                <view>
                  <view class="cu-tag bg-green light sm round">{{item.createTime}}</view>
                  <view class="cu-tag light sm round" :class="colorList.topColor[item.top]" v-if="item.top>0">置顶</view>
									<view class="cu-tag light sm round" :class="colorList.typeColor[item.type]" v-if="item.type">{{item.type}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </block>
			<Nodata :noModal="nodata"></Nodata>
    </view>
  </view>
</template>

<script>
  import Loading from '../../components/loading.vue';
  import Nodata from '../../components/nodata.vue';
  import util from '../../utils/util.js';
  import api from '../../utils/api.js';
  export default {
		components: {Loading,Nodata},
    data() {
      return {
				colorList:{
					topColor:{
							0:'bg-gradual-blue ',
							1:'bg-gradual-green',
							2:'bg-gradual-orange',
							3:'bg-gradual-red',
					},
					typeColor:{
						'原创':'bg-mauve',
						'转载':'bg-pink',
					}
				},
        imgUrl:getApp().globalData.imgUrl,
        CustomBar: getApp().globalData.CustomBar,
        labelCur: '全部',
        scrollLeft: 0,
        isCard: false,
        loadModal: false, //加载
				hint: '加载中...',
				nodata: false,
        // pageInex:1,//第一页
        labelList: [],
        posts: []
      }
    },
    props: ['pageInex'],
    created: function() {
      this.getLabelList();
      this.getArticle('up',1);
    },
    methods: {
      getLabelList: async function() {
				let labelList = await api.getLabelList()
				this.labelList = labelList.result.data;
      },
      labelSelect: function(e) {
        let {
          index,
          id
        } = e.currentTarget.dataset;
        this.labelCur = id;
        this.scrollLeft = (index - 1) * 60;
        this.$emit('articlesPageInex', '1');
        this.getArticle('up',1);
      },
      getArticle:async function(refresh = '', pageInex = 1) {
        this.hint = refresh == 'below' ? '刷新中...' : '加载中...';
				//清空文章列表
        this.loadModal = true;
				let page = !!refresh ? pageInex : this.pageInex;
				if (refresh == 'below'||page==1) {
				  this.posts = [];
				} 
				let label=this.labelCur=='全部'?'':this.labelCur;
				let result = await api.getPostsList(page, '', 1, 'createTime', label);
				this.loadModal = false;
				uni.stopPullDownRefresh();
				this.posts = page == 1 ? result.data : [...this.posts, ...result.data];
				this.nodata = (result.data.length === 0 && page == 1)||this.posts.length === 0? true : false;
				if (result.data.length == 0) {
					uni.showToast({
						title: '没有更多了！',
						icon: 'none',
						duration: 2000
					})
				}
      },
      bindPostDetail(e) {
        let {
          id,
          url
        } = e.currentTarget.dataset;

        uni.navigateTo({
          url: `${url}?id=${id}`
        })
      },
    }
  }
</script>

<style>
  .cu-card>.cu-item:nth-child(n+1) {
    margin-bottom: 0;
  }

  .header-nav {
    position: fixed;
    top: 64px;
    z-index: 10;
  }

  .content-kind {
    padding-top: 35px;
    margin-bottom: 67.5px;
  }
	.cite{
		 -webkit-line-clamp: 3;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
</style>
